<!DOCTYPE html>
<html lang="en">

<head>
       
    <meta charset="UTF-8">
       
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>节流</title>
</head>

<body>
        <div class="row">
                <div>
                        没有节流的input <input type="text" id="inputa">
                    </div>
                <div>
                        有节流的input <input type="text" id="inputb">
                    </div>
            </div>

       
    <script>
        const inputa = document.getElementById('inputa');
        const inputc = document.getElementById('inputc');



        //耗时耗性能任务 => promise 包一下？
        const ajax = (content) => {
            console.log(`ajax请求发送：${content}`);
        }
        // 节流功能
        const throttle = (func, delay) => {
            // last 上一次是啥时候执行的
            // deferTimer
            let deferTimer = null;
            // func，delay
            // 才是事件的处理函数
            // 定义时，生成 func，delay
            // keyup return func 调用时能找到闭包中的自由变量
            return (args) => {
                // 当前时间，隐式类型转换
                let now = new Date()
                if(last && now < last + delay) {
                    // 触发干掉
                    clearTimeout(deferTimer)
                    deferTimer = setTimeout(() => {
                        last = now
                        func(args)
                    }, delay)
                } else {
                    // 再次来到这个地方吧？
                    last = now
                    func(args)
                }
            }
        }
        inputa.addEventListener('keyup', (e) => {
            ajax(e.target.value);
        })

        let throttleedFunc = throttle(ajax, 1000);
        inputc.addEventListener('keyup', (e) => {
            let value = e.target.value;
            // googleSuggest体验
            // qps
            // let throttleedFunc=throttle(ajax, 1000); //为了节省内存消耗 可以放在外面 避免创建很多

            throttleedFunc(value);
        })
    </script>
</body>

</html>